<template>
    <div class="wrapper">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="border: none">
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        @click="clickAddButton"
                        style="float: right;">新增资料
                </el-button>
            </div>
            <div class="app-container" style="margin-top: -15px;margin-bottom: 15px">

                <el-table
                    border
                    :data="tableData"
                    style="width: 100%"
                    :header-cell-style="tableHeaderStyle"
            >
                <el-table-column
                        v-for="(item, index) of columns"
                        :align="item.align"
                        :key="index"
                        :prop="item.prop"
                        :show-overflow-tooltip="true"
                        :label="item.label"
                />
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="editButton(scope.row)"
                                type="text"
                                size="small">编辑
                        </el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.row.id)"
                                type="text"
                                size="small">移除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            </div>

            <el-drawer
                    title="新增项目资料"
                    size="30%"
                    :visible.sync="addDrawerFlag"
                    direction="rtl">
                <div class="app-container drawer-div">
                    <el-form
                            :key="key"
                            :model="proData"
                            ref="addProData"
                            label-position="right"
                            label-width="100px"
                            class="demo-dynamic"
                            size="small">
                        <el-form-item
                                required
                                prop="proNodeId"
                                label="项目节点："
                                :rules="[{ required: true, message: '请选择项目节点', trigger: 'change' }]">
                            <el-select
                                    v-model="proData.proNodeId"
                                    placeholder="请选择项目节点" style="width: 100%">
                                <el-option
                                        v-for="(item,index) in selectProNodes"
                                        style="width: 300px"
                                        :title="item.nodeName"
                                        :key="index"
                                        :label="item.nodeName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                                required
                                prop="proDataId"
                                label="项目资料："
                                :rules="[{ required: true, message: '请选择项目资料', trigger: 'blur' }]">
                            <el-select
                                    v-model="proData.proDataId"
                                    placeholder="请选择项目资料" @change="getMustFlag" style="width: 100%">
                                <el-option
                                        v-for="(item,index) in selectDataList"
                                        style="width: 300px"
                                        :key="index"
                                        :title="item.dataName"
                                        :label="item.dataName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                                required
                                prop="mustFlag"
                                label="是否必须："
                                :rules="[{ required: true, message: '请选择是否必须', trigger: 'blur' }]">
                            <el-select
                                    v-model="proData.mustFlag"
                                    placeholder="请选择是否必须" disabled = disabled style="width: 100%">
                                <el-option label="否" :value="0"/>
                                <el-option label="是" :value="1"/>
                            </el-select>
                        </el-form-item>


                        <el-form-item
                                prop="gitAdr"
                                label="Git地址："
                                :rules="[{ required: true, message: '请输入资料Git地址', trigger: 'blur' },
                                        {max: 500, message: '最长500字符' }]">
                            <el-input
                                    v-model.trim="proData.gitAdr"
                                    placeholder="请输入资料Git地址"
                                    class="datumInput"
                                   >
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="demo-drawer__footer">
                    <el-button type="primary" @click="submitProData('addProData')">提交</el-button>
                    <el-button @click="cancelDrawer">取消</el-button>
                </div>
            </el-drawer>

            <el-drawer
                    title="修改项目资料"
                    size="30%"

                    :visible.sync="editDrawerFlag"
                    direction="rtl">
                <div class="app-container drawer-div">
                    <el-form
                            :key="key"
                            :model="proData"
                            ref="editProData"
                            label-position="right"
                            label-width="100px"
                            class="demo-dynamic"
                            size="small">
                        <el-form-item
                                required
                                prop="proNodeId"
                                label="项目节点："
                                :rules="[{ required: true, message: '请选择项目节点', trigger: 'change' }]">
                            <el-select
                                    v-model="proData.proNodeId"
                                    placeholder="请选择项目节点" style="width: 100%">
                                <el-option
                                        v-for="(item,index) in selectProNodes"
                                        style="width: 300px"
                                        :key="index"
                                        :title="item.nodeName"
                                        :label="item.nodeName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                                required
                                prop="proDataId"
                                label="项目资料："
                                :rules="[{ required: true, message: '请选择项目资料', trigger: 'blur' }]">
                            <el-select
                                    v-model="proData.proDataId"
                                    placeholder="请选择项目资料" style="width: 100%">
                                <el-option
                                        v-for="(item,index) in selectDataList"
                                        style="width: 300px"
                                        :key="index"
                                        :title="item.dataName"
                                        :label="item.dataName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                                required
                                prop="mustFlag"
                                label="是否必须："
                                :rules="[{ required: true, message: '请选择是否必须', trigger: 'blur' }]">
                            <el-select
                                    v-model="proData.mustFlag"
                                    placeholder="请选择是否必须" style="width: 100%">
                                <el-option label="否" :value="0"/>
                                <el-option label="是" :value="1"/>
                            </el-select>
                        </el-form-item>


                        <el-form-item
                                prop="gitAdr"
                                label="Git地址："
                                :rules="[{ required: true, message: '请输入资料Git地址', trigger: 'blur' },
                                        {max: 500, message: '最长500字符' }]">
                            <el-input
                                    v-model.trim="proData.gitAdr"
                                    placeholder="请输入资料Git地址"
                                    class="datumInput"
                                    maxLength="500">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="demo-drawer__footer">
                    <el-button type="primary" @click="submitEditProData('editProData')">提交</el-button>
                    <el-button @click="cancelDrawer">取消</el-button>
                </div>
            </el-drawer>

        </el-card>
    </div>
</template>

<script>
import {
    http_project_info,
    http_proDatainfo_add,
    http_proDatainfo_delete,
    http_proDatainfo_update,
    http_proDate_findProNodeById,
    http_proDate_findData,

} from '@/api/viewProject'
import {tableHeaderStyle} from '@/utils/constant'
import {Message} from "element-ui";

const columns = [
    {
        prop: 'dataName',
        label: '文件名',
    },
    {
        prop: 'gitAdr',
        label: 'Git地址',
    },
    {
        prop: 'createUserName',
        label: '创建者',
        align: 'center'
    },
    {
        prop: 'createDate',
        label: '上传时间',
        align: 'center'
    }
]
export default {
    data() {
        return {
            addDrawerFlag: false,
            editDrawerFlag: false,
            columns,
            tableData: [],
            proId: null,
            tableHeaderStyle,
            proData: {},
            addLoading: false,
            list: [],
            selectProNodes: [],
            selectDataList:[],
            key: new Date().getTime(),
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.proId = this.$route.query.id
            this.$nextTick(() => {
                this.getList()
            })
        },
        getList() {
            const params = {
                proId: this.proId
            }
            http_project_info(params).then(res => {
                const {data} = res
                this.tableData = data || []
            })
        },
        http_add() {
            let proId = this.$route.query.id
            this.proData.proId = proId
            http_proDatainfo_add(this.proData,proId).then(result => {
                const {success} = result
                if (success) {
                    Message.success("保存成功")
                    this.getList()
                    this.addDrawerFlag = false
                }
            })
        },
        http_edit() {
            http_proDatainfo_update(this.proData).then(result => {
                const {success} = result
                if (success) {
                    Message.success("编辑成功")
                    this.getList()
                    this.editDrawerFlag = false
                }
            })
        },
        http_delete(id) {
            http_proDatainfo_delete(id).then(result => {
                const {success} = result
                if (success) {
                    Message.success("删除成功")
                    this.getList()
                }
            })
        },
        clickAddButton() {
            this.proData={}
            this.key= new Date().getTime()
            this.addDrawerFlag = true
        },
        submitProData(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.http_add()
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        cancelDrawer(){
            this.addDrawerFlag = false
            this.editDrawerFlag = false
        },
        http_proNodes(){
            let proId = this.$route.query.id
            http_proDate_findProNodeById(proId).then(result=>{
                const {data} = result
                this.selectProNodes = data
            })
        },
        submitEditProData(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.http_edit()
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        http_dataList(){
            http_proDate_findData().then(result=>{
                const {data} = result
                this.selectDataList = data
            })
        },
        editButton(proData){
            // console.log("proData",proData)
            this.proData = {}
            this.proData = {
                proId:Number(proData.proId),
                proNodeId:Number(proData.proNodeId),
                proDataId:Number(proData.dataId),
                gitAdr:proData.gitAdr,
                mustFlag:Number(proData.mustFlag),
                id:Number(proData.id)
            }
            this.editDrawerFlag = true

        },
        deleteRow(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http_delete(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

      getMustFlag(id){
        for(let data of this.selectDataList){
          if(data.id == id){
            this.proData.mustFlag = data.mustFlag;
          }
        }
      },


    },
    created() {
        this.http_proNodes()
        this.http_dataList()
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    margin: -20px -20px;
}
</style>

<style>
.demo-drawer__footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background-color: white;
    text-align: center;
}
</style>
<style lang="less" scoped>
    /deep/.el-card__header{
        border-bottom: none;
    }
    /*去掉打开抽屉时自动选中标题时的蓝色边框*/
    /deep/.el-drawer__header span:focus {
        outline: 0;
    }
</style>

<style lang="scss" >
.el-tooltip__popper{max-width:80%}
</style>
